<template>
  <section id="yg_user_card">
    <div class="user_box">
      <div class="user_info_box">
        <img class="avatar" :src="userInfo?.avatar" alt="" />
        <div class="content">
          <h1 class="name">
            {{ userInfo?.name }}
          </h1>
          <span class="motto" :title="userInfo?.motto">
            {{ userInfo?.motto }}
          </span>
        </div>
      </div>
      <ul class="web_list">
        <li
          class="web_item"
          v-for="item in webInfoList"
          :key="'web_item_' + item?.id"
        >
          <span>{{ item?.count }}+</span>
          <span>{{ item?.title }}</span>
        </li>
      </ul>
      <ul class="contact_list">
        <li
          class="contact_item"
          v-for="item in userInfo?.contactList"
          :key="'contact_item_' + item?.id"
        >
          <router-link to="">
            <img :src="item?.icon" alt="" />
          </router-link>
          <div class="contact_item_code">
            <span>{{ item?.title }} : {{ item?.content }}</span>
            <img :src="item?.code" alt="" v-show="item?.code !== ''" />
            <span v-show="item?.code !== ''"
              >扫一扫二维码，加我{{ item?.title }}</span
            >
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "YgUserCard",
  data() {
    return {
      webInfoList: [
        {
          id: 1,
          title: "文章",
          count: "99",
        },
        {
          id: 2,
          title: "访问",
          count: "99",
        },
        {
          id: 3,
          title: "评论",
          count: "99",
        },
      ],
    };
  },
  computed: {
    ...mapState("User", ["userInfo"]),
  },
};
</script>

<style lang="scss" scoped>
#yg_user_card {
  display: flex;
  flex-direction: column;
  width: 100%;
  & > .user_box {
    padding: 12px;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    & > .user_info_box {
      display: flex;
      flex-direction: row;
      & > .avatar {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
        background-color: #fafafa;
        border-radius: 4px;
        object-fit: cover;
        overflow: hidden;
      }
      & > .content {
        display: flex;
        flex-direction: column;
        padding: 4px 12px 0;
        width: 100%;
        & > .name {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: #171717;
        }
        & > .motto {
          margin-top: 6px;
          font-size: 13px;
          font-weight: 400;
          color: #999aaa;
          text-align: justify;
          word-break: break-all;
          // display: -webkit-box;
          // -webkit-line-clamp: 3;
          // -webkit-box-orient: vertical;
          // text-overflow: ellipsis;
          // overflow: hidden;
        }
      }
    }
    & > .web_list {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 12px !important;
      padding-top: 12px !important;
      border-top: 1px solid #eaeaea;
      & > .web_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        user-select: none;
        cursor: default;
        & > span:first-child {
          font-size: 14px;
          font-weight: 400;
          color: #4a4a4a;
        }
        & > span:last-child {
          margin-top: 2px;
          font-size: 12px;
          font-weight: 400;
          color: #aaa;
        }
      }
    }
    & > .contact_list {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 12px !important;
      padding-top: 12px !important;
      border-top: 1px solid #eaeaea;
      & > .contact_item {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        & > a {
          display: block;
          width: 100%;
          height: 100%;
          user-select: none;
          & > img {
            width: 100%;
            height: 100%;
          }
        }
        & > .contact_item_code {
          position: absolute;
          display: none;
          flex-direction: column;
          align-items: center;
          padding: 12px;
          background-color: #fff;
          border-radius: 4px;
          box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.1);
          z-index: 999;
          & > span:first-child {
            font-size: 14px;
            font-weight: 400;
            color: #171717;
          }
          & > img {
            min-width: 140px;
            min-height: 140px;
            width: 140px;
            height: 140px;
            user-select: none;
          }
          & > span:last-child {
            margin-top: 4px;
            font-size: 12px;
            font-weight: 400;
            color: #171717;
            user-select: none;
          }
        }
        &:hover .contact_item_code {
          display: flex;
        }
      }
    }
  }
}
</style>
